// 实现这个项目的构建任务
const { src , dest , series , parallel , watch } = require('gulp')
const sass = require('gulp-sass')(require('sass'));
const babel = require('gulp-babel')
const swig = require('gulp-swig')
const imageMin = require('gulp-imagemin')
const del = require('del')
const bs = require('browser-sync')
const useref = require('gulp-useref')
const uglify = require('gulp-uglify')
const cleanCss = require('gulp-clean-css')
const htmlmin = require('gulp-htmlmin')
const IF = require('gulp-if')



const data = {
    menus: [
      {
        name: 'Home',
        icon: 'aperture',
        link: 'index.html'
      },
      {
        name: 'Features',
        link: 'features.html'
      },
      {
        name: 'About',
        link: 'about.html'
      },
      {
        name: 'Contact',
        link: '#',
        children: [
          {
            name: 'Twitter',
            link: 'https://twitter.com/w_zce'
          },
          {
            name: 'About',
            link: 'https://weibo.com/zceme'
          },
          {
            name: 'divider'
          },
          {
            name: 'About',
            link: 'https://github.com/zce'
          }
        ]
      }
    ],
    pkg: require('./package.json'),
    date: new Date()
  }

// style样式编译
const styles = function(){
    return src('src/assets/styles/*.scss' , {base:'src'})
                .pipe( sass({outputStyle:'expanded'}) )
                .pipe( dest('temp') )
}
// js脚本编译
const scripts = function(){
    return src('src/assets/scripts/*.js' , {base:'src'})
                .pipe( babel({presets:[ '@babel/preset-env' ]}) )
                .pipe( dest('temp') )
}
// html模板编译
const pages = () => {
    return src('src/*.html', { base: 'src' })
            .pipe(swig({ data }))	//data是页面中需要用到的数据
            .pipe(dest('temp'))
}

// 图片无损压缩
const images = function(){
    return src('src/assets/images/**' , {base:"src"})
                .pipe( imageMin() )
                .pipe(dest('dist'))
}
// 字体
const fonts = function(){
    return src('src/assets/fonts/**' , {base:"src"})
                .pipe( imageMin() )
                .pipe(dest('dist'))
}
// 其他文件
const extra = function(){
    return src('public/**' , {base:"."})
                .pipe(dest('dist'))
}
// 文件清除
const clean = function(){
    return del(['dist'])
}

// 开发服务器
const serve = function(){
    // watch接收两个参数，第一个参数是globs--通配符（所有产生构建任务的路径），第二个参数就是要执行的任务
    watch( 'src/assets/styles/*.scss' , styles )
    watch( 'src/assets/scripts/*.js' , scripts )
    watch( 'src/*.html' , pages )

    watch( [
        'src/assets/images/**',
        'src/assets/fonts/**',
        'public/**'
    ] , bs.reload )

    bs.init({
        notify:false,
        port:'2080',
        files: 'temp/**', //热更新
        server:{  
            baseDir:'temp',  //server中要指定一下网站的根目录
            routes:{
                // 页面中有些文件路径指向,优先于baseDir的配置
                '/node_modules':'node_modules'
            }
        }
    })
}

// useref文件引用处理
const userefF = function(){
    return src('temp/*.html' , {base:'temp'})
                //这个转换流会把html中的构建注释做一个转换：searchPath找到这些文件在temp和根目录
                .pipe(useref({ searchPath: ['temp', '.'] }))
                // IF  会自动创建转换流，只是在内部会根据判断条件决定是否执行这个任务
                .pipe( IF(/.js$/, uglify()) )
                .pipe( IF(/.css$/, cleanCss()) )
                .pipe( IF(/.html$/, htmlmin({
                    collapseWhitespace: true, // 折叠空白字符
                    minifyCSS: true, // 内部标签压缩
                    minifyJS: true,
                })))
                .pipe(dest('dist'))
}

const compile = parallel( styles, scripts, pages, images, extra )
const develop = series( compile , serve ) 
const build = series( clean , series(parallel(compile , extra),userefF)  ) 

module.exports = {    
    clean,
    develop,
    build
}